<div class="test-app">
  <nz-page-header>
    <nz-page-header-title i18n="@@get-started.validate-title">Test your application</nz-page-header-title>
    <nz-page-header-content>
      <div class="wrapper">
        <div>
          <p nz-typography>
            <span i18n="@@get-started.test-app-intro-part1">The SDK's connection is currently undergoing active verification by tracking the call to the '</span>
            <strong>{{flagKey ?? 'Difficulty Mode'}}</strong>
            <span i18n="@@get-started.test-app-intro-part2">' feature flag that you set up in Step 1. You can copy and run the starter code provided in Step 2 to test the connection.</span>
          </p>
          <p nz-typography i18n="@@get-started.start-monitoring-events">Now monitoring the live events of the feature flag call...</p>
        </div>

        <div class="centered-text result">
          <nz-progress
            [nzWidth]="80"
            nzType="circle"
            [nzPercent]="normalizedProgress"
            [nzStatus]="status"
          ></nz-progress>
          <p i18n="@@get-started.listen-for-sdk-success" *ngIf="status === statusSuccess">Congratulations, your SDK is successfully set up.</p>
          <p i18n="@@get-started.listen-for-sdk-failure" *ngIf="status === statusException">We were not able to detect any events, please go back to the previous step and make sure you have initialized the SDK with correct options.</p>
          <button nz-button nzType="primary" *ngIf="status === statusException" (click)="start()">
            <span i18n="@@common.retry">Retry</span>
          </button>
          <button nz-button nzType="primary" *ngIf="status === statusSuccess" (click)="onComplete.emit()">
            <span i18n="@@common.start-journey">Start your journey</span>
          </button>
        </div>
      </div>
    </nz-page-header-content>
    <nz-page-header-extra>
      <nz-button-group>
        <button nz-button nzType="default" (click)="onPrev.emit()">
          <span nz-icon nzType="left"></span>
          <span i18n="@@common.prev">Prev</span>
        </button>
        <button nz-button nzType="default" (click)="onComplete.emit()">
          <span i18n="@@common.skip">Skip</span>
          <span nz-icon nzType="right"></span>
        </button>
      </nz-button-group>
    </nz-page-header-extra>
  </nz-page-header>
</div>
